'use client'

import Modal from "@/app/components/modals/Modal";

import { useState } from "react";
import useLoginModal from "@/app/hooks/useLoginModal";
import CustomButton from "@/app/components/forms/CustomButton";

const LoginModal = () => {
  const loginModal = useLoginModal();

  const content = (
      <>
        <h2 className="mb-6 text-2xl">Welcome to Djangobnb, please log in to continue</h2>

        <form className={'space-y-4'}>
            <input placeholder={'Your email address'} type={'email'} className={'w-full px-4 h-[54px] border border-gray-100 rounded-xl'}/>
            <input placeholder={'Your password'} type={'password'} className={'w-full px-4 h-[54px] border border-gray-100 rounded-xl'}/>

            <div className="p-5 bg-airbnb text-white rounded-xl opacity-80">The error message</div>
            <CustomButton label={'Submit'} onClick={() => console.log('Clicked button')} />
        </form>
      </>
  )

  return (
      <Modal label={'Log in'} close={loginModal.close} content={content} isOpen={loginModal.isOpen} />
  )
}

export default LoginModal;
